<template>
  <div class="coupon-filters">
    <div class="filter-grid">
      <div class="filter-item">
        <BaseInput
          v-model="filters.templateCode"
          placeholder="搜索优惠券模板编号"
          @input="handleSearch"
        />
      </div>
      
      <div class="filter-item">
        <BaseInput
          v-model="filters.name"
          placeholder="搜索优惠券模板名称"
          @input="handleSearch"
        />
      </div>
      
      <div class="filter-item">
        <select v-model="filters.couponType" class="form-select" @change="handleFilterChange">
          <option value="">全部类型</option>
          <option :value="1">减免券</option>
          <option :value="2">折扣券</option>
        </select>
      </div>
      
      <div class="filter-item">
        <select v-model="filters.isActive" class="form-select" @change="handleFilterChange">
          <option value="">全部状态</option>
          <option :value="true">启用</option>
          <option :value="false">禁用</option>
        </select>
      </div>
      
      <div class="filter-item filter-actions">
        <BaseButton type="secondary" @click="handleReset">
          重置
        </BaseButton>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue'
import { BaseInput, BaseButton } from '@/components/common'
import { useDebounce } from '@/composables'

interface FilterState {
  templateCode: string
  name: string
  couponType: number | ''
  isActive: boolean | ''
}

interface Emits {
  (e: 'filter-change', filters: FilterState): void
  (e: 'reset'): void
}

const emit = defineEmits<Emits>()

const filters = reactive<FilterState>({
  templateCode: '',
  name: '',
  couponType: '',
  isActive: ''
})

const { debounced: debouncedSearch } = useDebounce(() => {
  emit('filter-change', filters)
}, 500)

const handleSearch = () => {
  debouncedSearch()
}

const handleFilterChange = () => {
  emit('filter-change', filters)
}

const handleReset = () => {
  filters.templateCode = ''
  filters.name = ''
  filters.couponType = ''
  filters.isActive = ''
  emit('reset')
}
</script>

<style scoped>
.coupon-filters {
  background: var(--card-bg);
  border-radius: 12px;
  padding: 24px;
  border: 1px solid var(--border);
  margin-bottom: 24px;
}

.filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  align-items: end;
}

.filter-item {
  min-width: 0;
}

.filter-actions {
  display: flex;
  align-items: end;
}

.form-select {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card-bg);
  color: var(--text);
  font-size: 14px;
  outline: none;
  transition: all 0.2s ease;
}

.form-select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

@media (max-width: 768px) {
  .filter-grid {
    grid-template-columns: 1fr;
  }
  
  .filter-actions {
    justify-content: flex-end;
  }
}
</style>